<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	{% include 'htmlhead.html' %}
	<style type="text/css">
		body{
			background-color: #e2e2e2;
			text-align: center;
			margin:0;
			padding:0;
		}
		img{
			border-width: 0px;
		}
		#indexContainer{
			position:absolute;
			width: 832px;
			display: none;
		}
	</style>
	<script type="text/javascript">
	function initWindow(){
		var h = document.documentElement.clientHeight;
		var w = document.documentElement.clientWidth;
		if(h<623){
			$('#indexContainer').css({top: 0});
		}else{
			$('#indexContainer').css({top: (h - 632) / 2});
		}

		if(w<832){
			$('#indexContainer').css({left: 0});
		}else{
			$('#indexContainer').css({left: (w - 832) / 2});
		}
		$('#indexContainer').show();
	}
	window.onload = initWindow;
	window.onresize = initWindow;
	</script>
</head>

<body>
	<div id="indexContainer">
		<table cellpadding="0" cellspacing="0" style="padding:auto;margin:auto;">
			<tr>
				<td>
					<div style="margin:auto;text-align:center;background-color: #FFFFFF; padding:9px; height: 600px; width: 800px;">
						<div style="background-image: url('/media/css/images/index_bg.jpg'); background-repeat:repeat-x; height: 600px; ">
							<img src="/media/css/images/index_center.png" style="margin-top:45px;" usemap="#Map"/>
						</div>
					</div>
				</td>
				<td style="background-image:url('/media/css/images/index_right.jpg');width:14px;"></td>
			</tr>
			<tr>
				<td style="background-image:url('/media/css/images/index_bottom.jpg');background-repeat:no-repeat; height:14px;"></td>
				<td style="background-image:url('/media/css/images/index_corner.jpg');background-repeat:no-repeat; height:14px;"></td>
			</tr>
		</table>
		<map name="Map">
			<area shape="rect" coords="156,170,263,200" href="/blog/" target="_self" onfocus="this.blur()"/>
			<area shape="rect" coords="157,218,268,247" href="/work/" target="_self" onfocus="this.blur()"/>
			<area shape="rect" coords="154,262,279,294" href="/photo/" target="_self" onfocus="this.blur()"/>
			<area shape="rect" coords="155,312,313,341" href="/download/" target="_self" onfocus="this.blur()"/>
			<area shape="rect" coords="157,361,295,387" href="/resume/" target="_self" onfocus="this.blur()"/>
		</map>
	</div>
</body>
</html>
